/*it 路径图组件*/

// node（节点）的类型
export interface NodeConfigType {
	/**节点id */
	id: string;

	/**节点类型
	 * 内置节点类型 cicle|rect|ellipse|diamond|triangle|star|image|modelRect|donut
	 * 如果不能满足需求，可以使用'G6.registerNode'api自定义节点类型
	 * 默认cicle
	 */
	type?: string;

	/**节点x坐标 */
	x?: number;

	/**节点y坐标 */
	y?: number;

	/**节点的大小 */
	size?: number;

	/**节点样式 */
	style?: Record<string, any>;

	/**节点文本的配置，可以查看官方文档 */
	labelCfg?: Record<string, any>;

	/**其它官方配置 */
	[prop: string]: any;
}

// edge（边）的类型
export interface EdgeConfigType {
	/**源节点的id */
	source: string;

	/**目标节点的id */
	target: string;

	/**边类型
	 * 内置边类型 line|polyline|arc|quadratic|cubic|cubic-vertical|cubic-horizontal|loop
	 * 或如果不能满足需求，可以使用'G6.registerEdge'api自定义边类型
	 * 默认line
	 */
	type?: string;

	/**其它官方配置 */
	[prop: string]: any;
}

// graph组件渲染数据的类型
export interface GraphData {
	nodes: Array<NodeConfigType>;
	edges: Array<EdgeConfigType>;
}

// 组件的类型
export type GraphType =
	| 'AllItRoad'
	| 'SegmentOverview'
	| 'StepEndToEndRelation'
	| 'SegmentDetail'
	| 'StepAnalysis'
	| 'netWork'
	| 'NetworkFlow'
	| 'Networke2e'
	| 'NetworkPerformance';

// 模式支持的行为类型
type ActionType =
	// 拖拽画布
	| 'drag-canvas'
	// 缩放画布
	| 'zoom-canvas'
	// 拖拽节点
	| 'drag-node'
	/**点击选中节点，再次点击节点或点击 Canvas 取消选中状态；,相关事件'nodeselectchange' */
	| 'click-select';

// type modeActionType =

// graph实例的默认配置类型
export interface CustomOptionsType {
	/**最小缩放比例*/
	minZoom?: number;
	/**最大缩放比例*/
	maxZoom?: number;
	/**布局配置项**/
	layout?: {
		/**dagre 层次布局(默认) grid 格子布局 force 力导向布局 random随机布局 concentric 同心圆布局
		 * 如果布局不能满足需求，可以使用'G6.registerLayout'api自定义布局类型
		 */
		type: 'dagre' | 'grid' | 'force' | 'random' | 'concentric';

		/**布局方向 "LR"表示从左向右布局 "LR" "RL" "BT" "TB"*/
		rankdir?: 'LR' | 'RL' | 'BT' | 'TB';

		/**节点间距， rankdir为 LR时代表竖直方向的距离 */
		nodesep?: number;

		/**层次间距   rankdir为 LR时代表水平方向的距离*/
		ranksep?: number;

		/**动态计算节点间距的方法 */
		nodesepFunc?(node: NodeConfigType): number;

		/**动态计算层次间距的方法 */
		ranksepFunc?(node: NodeConfigType): number;

		/**其它官方文档的属性 */
		[prop: string]: any;
	};
	/**图的模式，不同模式下可以配置不同的行为
	 * 如果需要自定义预设的行为，请参照官方文档
	 * 也可以自定义自己的行为类型(G6.registerBehavior)
	 */
	modes?: {
		// 默认模式
		defaultMode: Array<ActionType> | Array<any>;

		// 编辑默认模式
		edit: Array<ActionType> | Array<any>;

		// 默认模式-不拖动节点
		editNoDragNode?: Array<ActionType> | Array<any>;
	};

	/** 渲染方式 canvas或者svg*/
	renderer?: 'canvas';
	/**
	 * 图的工具栏 默认的 ToolBar 提供了撤销、重做、放大等功能
	 * 也可以用来进行模式的切换
	 */
	toolbarObj?: {
		/**	ToolBar 容器，如果不设置，则默认使用 canvas 的 DOM 容器 */
		container?: HTMLDivElement;

		/**ToolBar 内容元素的 class 类名 */
		className?: string;

		/** ToolBar 的位置坐标 */
		position?: any;

		/** 通常用来配置工具栏的按钮,需要为按钮标签设置code属性 */
		getContent(graph?: any): HTMLDivElement;

		/**点击 ToolBar 中每个图标的回调函数
		 * @param code 表示点击的是哪个按钮
		 */
		handleClick?(code: string, graph: any): void;
	};
}

// 组件配置类型
export interface GraphConfigType {
	/**
	 * 类型
	 */
	type: GraphType;
	/**
	 * 宽度
	 */
	canvasWidth?: number;
	/**
	 * 高度
	 */
	canvasHeight?: number;
	/**
	 * 没有数据的标识
	 */
	noDataFlag?: boolean;
	/**
	 * graph图配置项
	 */
	customOptions?: CustomOptionsType;
}
